import Vue from 'vue'
import Main from './Main'
import WrapDom from './WrapDom'

const ToastCustomDialog = {
  ToastCount: 0, // toast的计数器，每触发一次加一
  dom: null,
  scrollDom: null
}
const ToastConstructor = Vue.extend(Main)
const ToastWrapConstructor = Vue.extend(WrapDom)

export const Toast = (options) => {
  let isPause = false // 鼠标进入，临时暂停倒计时
  let timer = null
  options.duration = options.duration || 1
  let time = Number(options.duration) // 倒计时，单位是秒

  if (!ToastCustomDialog.dom) {
    // debugger
    const mainInstance = new ToastConstructor({
      el: document.createElement('div'),
      data () {
        return {
          toastStyle: {
            top: '30px'
          },
          toastIndex: ToastCustomDialog.ToastCount,
          time,
          msg: options.msg,
          type: options.type
        }
      }
    })
    document.body.appendChild(mainInstance.$el) // 挂载
    ToastCustomDialog.dom = document.getElementById('CustomToastDom156')
    if (!ToastCustomDialog.scrollDom && ToastCustomDialog.dom && ToastCustomDialog.dom.children) {
      ToastCustomDialog.scrollDom = ToastCustomDialog.dom.children[0]
      // debugger
    }
  }

  const instance = new ToastWrapConstructor({
    el: document.createElement('div'),
    data () {
      return {
        toastStyle: {
          top: '30px'
        },
        wrapCls: ['in'],
        toastIndex: ToastCustomDialog.ToastCount,
        time,
        msg: options.msg,
        type: options.type
      }
    }
  })

  if (ToastCustomDialog.dom) {
    const wrapDom = instance.$el
    ToastCustomDialog.scrollDom.appendChild(wrapDom)
    // debugger
    instance.wrapDom = wrapDom
    setTimeout(() => {
      instance.wrapCls = []
      // debugger
    }, 300)
  }
  // const wrapDom = instance.$el.querySelector('.toast-wrap')
  ToastCustomDialog.ToastCount++

  // 鼠标进入停止倒计时
  instance.wrapDom.addEventListener('mouseenter', () => {
    isPause = true
  })
  // 鼠标离开恢复倒计时
  instance.wrapDom.addEventListener('mouseleave', () => {
    isPause = false
    toastCountdown()
  })

  // console.log(instance.toastIndex, 'options', options, instance.$el)

  // 监听来自模板的事件回调
  instance.$on('customEvent', ({ fnName }) => {
    // debugger
    if (fnName === 'close') {
      time = 0
      closeToast('customEvent1')
    }
  })
  // debugger

  // 进入窗口关闭的倒计时 *********************************************************************************************************************************
  toastCountdown()

  // 关闭并移除toast
  const closeToast = ToastCustomFun.throttle(function (testStr) {
    // return
    console.log('关闭,testStr=', testStr, options.type)
    instance.wrapCls = ['out']
    setTimeout(() => { // 延时400毫秒是展示退出动画
      if (instance.$el.__vue__) {
        // debugger
        ToastCustomDialog.scrollDom.removeChild(instance.wrapDom)
      }
      instance.$destroy()
    }, 500)
  })

  // 窗口关闭倒计时
  function toastCountdown () {
    if (time > 0) {
      if (timer) {
        clearTimeout(timer)
        timer = null
      }
      timer = setTimeout(() => {
        if (!isPause) { // 正在执行的要停止
          console.log('1.toastCountdown1', options.type, time)
          --time
          instance.updateTempData({ key: 'time', value: time }) // 更新倒计时剩余时间
          toastCountdown()
        }
      }, 1000)
    } else {
      // debugger
      closeToast('2.toastCountdown1')
    }
  }
}

const ToastCustomFun = {
  /**
  * 节流函数: 指定时间间隔内只会执行一次任务，在改时间内，不管后面多少触发，都只执行一次。
  * @param {function} fn
  * @param {Number} interval
  */
  throttle (fn, interval = 300) {
    let canRun = true
    // console.log('节流-throttle-1')
    return function () {
      // console.log('节流-throttle-2')
      if (!canRun) return
      canRun = false
      setTimeout(() => {
        // console.log('节流-throttle-3')
        fn.apply(this, arguments)
        canRun = true
      }, interval)
    }
  },
  // 获取元素的位置以及大小
  getRect (el) {
    if (!el) {
      return false
    }
    if (el instanceof window.SVGElement) {
      const rect = el.getBoundingClientRect()
      return {
        top: rect.top,
        left: rect.left,
        width: rect.width,
        height: rect.height
      }
    } else {
      return {
        top: el.offsetTop,
        left: el.offsetLeft,
        width: el.offsetWidth,
        height: el.offsetHeight
      }
    }
  }
}
